<template>
  <section 
    id="timeline" 
    class="section-padding"
    :style="{ 
      backgroundColor: bgColor,
      '--primary-color': primaryColor,
      '--accent-color': accentColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16" v-if="showHeader">
        <span class="text-primary font-medium">发展历程</span>
        <h2 class="section-title">智联科技的成长之路</h2>
        <p class="section-subtitle">见证我们的发展历程和重要里程碑</p>
      </div>
      
      <!-- 时间轴内容 -->
      <div class="max-w-4xl mx-auto relative">
        <!-- 时间轴中心线 -->
        <div 
          class="absolute top-0 bottom-0 w-1 -translate-x-1/2 z-0"
          :style="{
            left: isLeftAligned ? '2rem' : '50%',
            backgroundColor: timelineLineColor
          }"
        ></div>
        
        <!-- 时间点列表 -->
        <div 
          v-for="(item, index) in timelineItems" 
          :key="index"
          class="relative mb-16 last:mb-0"
          :class="item.animationDelay ? `animation-delay-${item.animationDelay}` : ''"
        >
          <div 
            class="flex flex-col md:flex-row items-center"
            :class="isLeftAligned ? 'items-start' : ''"
          >
            <!-- 左侧内容 (偶数项/右侧内容) -->
            <div 
              :class="getLeftColumnClasses(index)"
            >
              <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
              <p class="text-dark/70" v-html="item.description"></p>
              
              <!-- 移动端时间标签 -->
              <div class="mt-2 md:hidden">
                <span 
                  class="inline-block px-3 py-1 rounded-full text-sm font-medium"
                  :class="item.isAccent ? 'bg-accent/10 text-accent' : 'bg-primary/10 text-primary'"
                >
                  {{ item.date }}
                </span>
              </div>
            </div>
            
            <!-- 时间点标记 -->
            <div 
              class="absolute z-10 flex items-center justify-center"
              :style="{
                left: isLeftAligned ? '2rem' : '50%',
                transform: isLeftAligned ? 'translateX(-50%)' : 'translateX(-50%)'
              }"
            >
              <div 
                class="w-8 h-8 rounded-full-full flex shadow-full flex items-center justify-center shadow-lg transition-transform hover:scale-110"
                :class="item.isAccent ? 'bg-accent text-white' : 'bg-primary text-white'"
              >
                <i class="fa" :class="item.icon"></i>
              </div>
            </div>
            
            <!-- 右侧内容 (奇数项/时间标签) -->
            <div 
              :class="getRightColumnClasses(index)"
            >
              <!-- 桌面端时间标签 -->
              <span 
                class="inline-block px-3 py-1 rounded-full text-sm font-medium"
                :class="item.isAccent ? 'bg-accent/10 text-accent' : 'bg-primary/10 text-primary'"
              >
                {{ item.date }}
              </span>
              
              <!-- 移动端隐藏的重复内容 (仅左侧对齐模式) -->
              <div 
                v-if="isLeftAligned && index % 2 === 0" 
                class="hidden md:block mt-2"
              >
                <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
                <p class="text-dark/70" v-html="item.description"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'TimelineSection',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'timeline-section',
      displayName: '时间轴模块',
      description: '展示发展历程或重要事件的时间轴组件',
      icon: 'fa-history',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'accentColor',
            label: '强调色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#f9fafb'
          },

          {
            name: 'showHeader',
            label: '显示标题区域',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'timelineLayout',
            label: '时间轴布局',
            type: 'select',
            options: [
              { label: '左右交替', value: 'alternating' },
              { label: '左侧对齐', value: 'left-aligned' }
            ],
            defaultValue: 'alternating'
          },
          {
            name: 'timelineLineColor',
            label: '轴线颜色',
            type: 'color',
            defaultValue: 'rgba(22, 93, 255, 0.2)'
          },
          {
            name: 'animation',
            label: '动画效果',
            type: 'select',
            options: [
              { label: '无', value: 'none' },
              { label: '渐入', value: 'fade-in' },
              { label: '滑入', value: 'slide-in' }
            ],
            defaultValue: 'fade-in'
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'timelineItems',
            label: '时间轴项目',
            type: 'array',
            description: '时间轴上的事件列表',
            defaultValue: [
              {
                date: '2003年',
                title: '公司成立',
                description: '智联科技正式成立，初期团队仅有10人，专注于为中小企业提供信息化解决方案。',
                icon: 'fa-flag',
                isAccent: false,
                animationDelay: '100ms'
              },
              {
                date: '2008年',
                title: '首款自主研发ERP发布',
                description: '推出首款自主研发的ERP系统，获得市场广泛认可，客户数量突破100家。',
                icon: 'fa-rocket',
                isAccent: false,
                animationDelay: '200ms'
              },
              {
                date: '2013年',
                title: '完成A轮融资',
                description: '获得千万级A轮融资，公司规模扩大至100人，设立上海、广州分公司。',
                icon: 'fa-money',
                isAccent: false,
                animationDelay: '300ms'
              },
              {
                date: '2018年',
                title: '布局云计算与大数据',
                description: '战略布局云计算和大数据领域，推出云原生解决方案，客户数量突破500家。',
                icon: 'fa-cloud',
                isAccent: false,
                animationDelay: '400ms'
              },
              {
                date: '2023年',
                title: 'AI驱动战略转型',
                description: '推出AI驱动的企业智能解决方案，完成B轮融资，员工规模达300人，成为行业领先的数字化转型服务商。',
                icon: 'fa-robot',
                isAccent: true,
                animationDelay: '500ms'
              }
            ]
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'itemClick',
        label: '时间点点击',
        description: '当用户点击时间点标记时触发',
        parameters: [
          { name: 'item', type: 'object', description: '时间点信息对象' },
          { name: 'index', type: 'number', description: '时间点索引' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'addTimelineItem',
        label: '添加时间点',
        description: '向时间轴添加新的时间点',
        parameters: [
          { name: 'item', type: 'object', required: true, description: '新时间点信息' }
        ]
      },
      {
        name: 'setLayout',
        label: '设置布局',
        description: '切换时间轴布局（左右交替/左侧对齐）',
        parameters: [
          { name: 'layout', type: 'string', required: true, description: '布局类型：alternating 或 left-aligned' }
        ]
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    accentColor: {
      type: String,
      default: '#36CFC9'
    },
    bgColor: {
      type: String,
      default: '#f9fafb'
    },
    timelineLineColor: {
      type: String,
      default: 'rgba(22, 93, 255, 0.2)'
    },
    children: {
      type: Array,
      default: () => []
    },
    // 布局配置
    timelineLayout: {
      type: String,
      default: 'alternating',
      validator: (value) => ['alternating', 'left-aligned'].includes(value)
    },
    animation: {
      type: String,
      default: 'fade-in',
      validator: (value) => ['none', 'fade-in', 'slide-in'].includes(value)
    },
    
    // 显示配置
    showHeader: {
      type: Boolean,
      default: true
    },
    
    // 内容配置
    timelineItems: {
      type: Array,
      default: () => [
        {
          date: '2003年',
          title: '公司成立',
          description: '智联科技正式成立，初期团队仅有10人，专注于为中小企业提供信息化解决方案。',
          icon: 'fa-flag',
          isAccent: false,
          animationDelay: '100ms'
        },
        {
          date: '2008年',
          title: '首款自主研发ERP发布',
          description: '推出首款自主研发的ERP系统，获得市场广泛认可，客户数量突破100家。',
          icon: 'fa-rocket',
          isAccent: false,
          animationDelay: '200ms'
        },
        {
          date: '2013年',
          title: '完成A轮融资',
          description: '获得千万级A轮融资，公司规模扩大至100人，设立上海、广州分公司。',
          icon: 'fa-money',
          isAccent: false,
          animationDelay: '300ms'
        },
        {
          date: '2018年',
          title: '布局云计算与大数据',
          description: '战略布局云计算和大数据领域，推出云原生解决方案，客户数量突破500家。',
          icon: 'fa-cloud',
          isAccent: false,
          animationDelay: '400ms'
        },
        {
          date: '2023年',
          title: 'AI驱动战略转型',
          description: '推出AI驱动的企业智能解决方案，完成B轮融资，员工规模达300人，成为行业领先的数字化转型服务商。',
          icon: 'fa-robot',
          isAccent: true,
          animationDelay: '500ms'
        }
      ]
    },
    

  },
  
  computed: {
    // 判断是否为左侧对齐布局
    isLeftAligned() {
      return this.timelineLayout === 'left-aligned';
    }
  },
  
  mounted() {
    // 初始化动画（如果需要）
    if (this.animation !== 'none') {
      this.initAnimation();
    }
  },
  
  methods: {
    /**
     * 获取左侧列的样式类
     */
    getLeftColumnClasses(index) {
      // 左侧对齐布局
      if (this.isLeftAligned) {
        return 'md:w-1/2 md:pl-12 mb-4 md:mb-0 md:text-left order-1';
      }
      
      // 左右交替布局
      return index % 2 === 0 
        ? 'md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 order-2 md:order-1'
        : 'hidden';
    },
    
    /**
     * 获取右侧列的样式类
     */
    getRightColumnClasses(index) {
      // 左侧对齐布局
      if (this.isLeftAligned) {
        return 'md:w-1/2 order-2';
      }
      
      // 左右交替布局
      return index % 2 === 0
        ? 'md:w-1/2 md:pl-12 order-1 md:order-2'
        : 'md:w-1/2 md:pl-12 mb-6 md:mb-0 order-1 md:text-left';
    },
    
    /**
     * 初始化动画
     */
    initAnimation() {
      // 简单的滚动显示动画实现
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });
      
      // 观察所有时间轴项目
      document.querySelectorAll('#timeline > div > div > div.relative').forEach(item => {
        item.classList.add('timeline-item', `animate-${this.animation}`);
        observer.observe(item);
      });
    },
    
    /**
     * 处理时间点点击
     */
    handleItemClick(item, index, e) {
      e.stopPropagation();
      this.$emit('itemClick', {
        item,
        index
      });
    },
    
    /**
     * 添加时间点
     */
    addTimelineItem(item) {
      this.timelineItems.push({
        date: '',
        title: '',
        description: '',
        icon: 'fa-circle',
        isAccent: false,
        ...item
      });
    },
    
    /**
     * 设置布局
     */
    setLayout(layout) {
      if (['alternating', 'left-aligned'].includes(layout)) {
        this.timelineLayout = layout;
      }
    },
    

  }
};
</script>

<style scoped>
/* 主题色适配 */
.text-primary {
  color: var(--primary-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.bg-primary\/10 {
  background-color: rgba(22, 93, 255, 0.1) !important;
}

.bg-accent\/10 {
  background-color: rgba(54, 207, 201, 0.1) !important;
}

/* 基础样式 */
.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1.6;
}

/* 时间轴样式 */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 动画效果变体 */
.animate-fade-in {
  transition-property: opacity;
}

.animate-slide-in {
  transition-property: opacity, transform;
}

/* 动画延迟类 */
.animation-delay-100ms {
  transition-delay: 100ms;
}

.animation-delay-200ms {
  transition-delay: 200ms;
}

.animation-delay-300ms {
  transition-delay: 300ms;
}

.animation-delay-400ms {
  transition-delay: 400ms;
}

.animation-delay-500ms {
  transition-delay: 500ms;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  /* 移动端时间轴线位置调整 */
  .absolute {
    left: 1.5rem !important;
  }
}
</style>
    